<template>
  <!--信息详情-->
  <div class="app-container" :style="{height: tableHeight + 130 + 'px'}" style="overflow-y: auto">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>单晶编号</label><el-input v-model="searchList.crystalNo"></el-input>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <!--文件一---------------------------------------------------------------------------------------------------------->
        <el-tab-pane v-for="(item, index) in file" :label="item.sheetName" :name="String(index)" :key="index">
          <el-table :data="item.crystalMessages"  :height="tableHeight-100"   border fit highlight-current-row class="jc_table_wrap" ref="multipleTable">
            <el-table-column  type="index"  label='编号' width="70" fixed>
            </el-table-column>
            <el-table-column label='id' v-if="false" fixed>
              <template scope="scope">
                {{scope.row.id}}
              </template>
            </el-table-column>
            <el-table-column label='箱号' fixed>
              <template scope="scope">
                {{scope.row.no}}
              </template>
            </el-table-column>
            <el-table-column label="单晶编号" width="230" fixed>
              <template scope="scope">
                {{scope.row.crystalNo}}
              </template>
            </el-table-column>
            <el-table-column label="规格" width="130">
              <template scope="scope">
                {{scope.row.norms}}
              </template>
            </el-table-column>
            <el-table-column label='托号'>
              <template scope="scope">
                {{scope.row.orderNumber}}
            </template>
            </el-table-column>
            <el-table-column label='客户类别'>
              <template scope="scope">
                {{scope.row.customerType}}
            </template>
            </el-table-column>
            <!--<el-table-column label='厂牌'>
              <template scope="scope">
                {{scope.row.factoryCard}}
            </template>
            </el-table-column>-->
            <el-table-column label="单晶长度(mm)" width="120">
              <template scope="scope">
                {{scope.row.crystalLength}}
              </template>
            </el-table-column>
            <el-table-column label="崩损长度(mm)" width="120">
              <template scope="scope">
                {{scope.row.chipLength}}
              </template>
            </el-table-column>
            <el-table-column label="单晶出厂重量(kg)" width="150">
              <template scope="scope">
                {{scope.row.factoryWeight}}
              </template>
            </el-table-column>
            <el-table-column label="称重(kg)">
              <template scope="scope">
                {{scope.row.weight}}
              </template>
            </el-table-column>
            <el-table-column label="斜(mm)">
              <template scope="scope">
                {{scope.row.oblique}}
              </template>
            </el-table-column>
            <el-table-column label="晶体灰皮(mm)" width="120">
              <template scope="scope">
                {{scope.row.crystalGrey}}
              </template>
            </el-table-column>
            <el-table-column label="晶片灰皮(mm)" width="120">
              <template scope="scope">
                {{scope.row.chipGrey}}
              </template>
            </el-table-column>
            <el-table-column label="线痕(mm)">
              <template scope="scope">
                {{scope.row.lineMark}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template scope="scope">
                <el-button @click="showDialog(scope.$index,scope.row.id)" type="text">修改</el-button>
                <el-button @click="deleteRow(scope.row.id)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="changePage" :page-size="pageSize"  @size-change="handleSizeChange"/>
         <!-- <el-pagination v-for="item in item.pagemap"
            @size-change="handleSizeChange"
            @current-change="changePage"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="item.total">
          </el-pagination>-->
        </el-tab-pane>
      </el-tabs>
    <h4>硅棒汇总</h4>
    <el-table :data="summaryData"  border fit highlight-current-row class="jc_table_wrap" ref="multipleTable">
      <el-table-column label='物料名称'>
        <template scope="scope">
          {{scope.row.materialName}}
        </template>
      </el-table-column>
      <el-table-column label="总箱数">
        <template scope="scope">
          {{scope.row.totalNo}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="直径">
         <template scope="scope">
           {{scope.row.description}}
         </template>
       </el-table-column>-->
      <el-table-column label="单晶长度(mm)">
        <template scope="scope">
          {{scope.row.totalLength}}
        </template>
      </el-table-column>
      <el-table-column label="崩损长度(mm)">
        <template scope="scope">
          {{scope.row.totalChiplength}}
        </template>
      </el-table-column>
      <el-table-column label="单晶出厂重量(kg)">
        <template scope="scope">
          {{scope.row.totalFactoryweight}}
        </template>
      </el-table-column>
      <el-table-column label="称重(kg)">
        <template scope="scope">
          {{scope.row.totalWeight}}
        </template>
      </el-table-column>
      <el-table-column label="斜(mm)">
        <template scope="scope">
          {{scope.row.totalOblique}}
        </template>
      </el-table-column>
      <el-table-column label="晶体灰皮(mm)">
        <template scope="scope">
          {{scope.row.totalCrystalgrey}}
        </template>
      </el-table-column>
      <el-table-column label="晶片灰皮(mm)">
        <template scope="scope">
          {{scope.row.totalChipgrey}}
        </template>
      </el-table-column>
      <el-table-column label="线痕(mm)">
        <template scope="scope">
          {{scope.row.totalScratch}}
        </template>
      </el-table-column>
    </el-table>
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>备注</label>
      <el-input type="textarea"></el-input>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display:block;text-align: center;margin-top: 10px;">
      <el-button @click="closeDialog">关闭</el-button>
    </div>
    <!--修改-->
    <el-dialog title="修改" :visible.sync="edit_visible" class="jc_dialog_wrap">
      <el-form :model="form_edit" label-width="120px">
        <el-form-item label="编号">
          <el-input v-model="index"></el-input>
        </el-form-item>
        <el-form-item label="箱号">
          <el-input v-model="form_edit.no"></el-input>
        </el-form-item>
        <el-form-item label="单晶编号">
          <el-input v-model="form_edit.crystalNo"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="form_edit.norms"></el-input>
        </el-form-item>
        <el-form-item label="单晶长度(mm)">
          <el-input v-model="form_edit.crystalLength"></el-input>
        </el-form-item>
        <el-form-item label="崩损长度(mm)">
          <el-input v-model="form_edit.chipLength"></el-input>
        </el-form-item>
        <el-form-item label="单晶出厂重量">
          <el-input v-model="form_edit.factoryWeight"></el-input>
        </el-form-item>
        <el-form-item label="称重(kg)">
          <el-input v-model="form_edit.weight"></el-input>
        </el-form-item>
        <el-form-item label="斜(mm)">
          <el-input v-model="form_edit.oblique"></el-input>
        </el-form-item>
        <el-form-item label="晶体灰皮(mm)">
          <el-input v-model="form_edit.crystalGrey"></el-input>
        </el-form-item>
        <el-form-item label="晶片灰皮(mm)">
          <el-input v-model="form_edit.chipGrey"></el-input>
        </el-form-item>
        <el-form-item label="线痕(mm)">
          <el-input v-model="form_edit.lineMark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="edit_visible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import * as Silicon from "../../../api/silicon_rod/silicon";

  export default {
    components: {

    },
    data() {
      return {
        searchList: { pageSize: '',},
        list: [],
        activeName: '0',
        total:0,
        multipleSelection: [],
        file: [],
        summaryData: [],
        pl88: '',
        list01: [],
        form_edit: {},
        edit_visible: false,
        index: 0,
        id: '',
        sheetName: '',
        tab: 0,
        pageSize: 10,
        currentPage: 1,
      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData(p=1) {
        this.summaryData = []; //清空数据
        this.id = this.$route.query.id;
        var params = this.searchList;
        params.pageNum = this.currentPage =p;
        params.pageSize = this.pageSize;
        params.id = this.id;
        if(this.file.length > 0){
          params.sheetName =this.file[this.activeName].sheetName;
        }
        Silicon.detailRow(params).then(data => {
          this.file = data.msg;
            this.sheetName =this.file[this.tab].sheetName;
            if(this.file !== undefined) {
              if (this.file.length > 0) {
                this.summaryData.push(this.file[this.tab].crystalTotal);
                this.total = this.file[this.tab].pagemap.total
              }
            }


         })

      },
      handleClick(tab, event) {
        var p = 1;
        this.tab = tab.index;
        this.fetchData(p);
          //console.log('tab',tab);
          //this.summaryData= [];
          //console.log('this.sheetName =this.file[this.activeName].sheetName',this.sheetName =this.file[this.activeName].sheetName);
          /*this.sheetName =this.file[this.activeName].sheetName;
          var params = this.searchList;
          params.pageNum = this.currentPage = 1;
          params.pageSize = 15;
          params.id = this.id
          params.sheetName = this.sheetName;
          Silicon.detailRow(params).then(data => {
            this.file = data.msg;
            this.total = this.file[tab.index].pagemap.total;
            this.summaryData.push(this.file[tab.index].crystalTotal);

            switch(tab.index) {
              case tab.index: this.summaryData.push(this.file[tab.index].crystalTotal);
            }

          })*/
        /*this.sheetName =this.file[this.activeName].sheetName;
        this.summaryData= [];
        switch(tab.index) {
          case tab.index: this.summaryData.push(this.file[tab.index].crystalTotal);
        }*/
      },
      showDialog(index,id) {
        this.edit_visible = true;
        Silicon.editId(id).then(data => {
          this.index = index+1;
          this.form_edit = data.msg;
        })
      },
      searchRows() {
        Silicon.searchDetailRow(this.searchList.crystalNo,this.id).then(data => {
           this.file = data.msg;
            this.activeName = '0';
            this.total = 0;

          /*for(var i in data.msg) {

                this.file = [];
                this.file.push(data.msg[i]);
                console.log('this.file',this.file);
                this.activeName = '0'; //当前的this.activeName可能不是0，如果不是0，那就无法选中当前所在的sheet页

          }*/
        })
      },
      deleteRow(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          Silicon.delDetailRow(id).then(data => {//删除操作
            this.file = [];
            this.searchList.crystalNo = ''; //把查询条件删除
            Silicon.detailRow({id:this.id}).then(data => { //更新数据
                this.file = data.msg;
                this.summaryData = [];
                if(this.file !== undefined) {//更新汇总
                  if (this.file.length > 0) {
                    this.summaryData.push(this.file[0].crystalTotal);
                  }
                }
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      submitEditForm() {//修改的提交
        Silicon.updateMessage(this.form_edit,data=>{
          this.edit_visible = false;
          this.file = [];
          //有两种情况 搜索时和未搜索时
          if(this.searchList.crystalNo === undefined) {
            Silicon.detailRow(this.id).then(data => { //更新数据

              this.file = data.msg;
              this.summaryData = [];
              if(this.file !== undefined) {//更新汇总
                if (this.file.length > 0) {
                  this.summaryData.push(this.file[0].crystalTotal);
                }
              }
            })
          }else {
            Silicon.searchDetailRow(this.searchList.crystalNo,this.id).then(data => {
              this.file = data.msg;
            })
          }


        });
      },
      closeDialog() {
        this.$router.push({path: '/silicon_rod/siliconInfor_import'})
      },
      changePage(p) {
          console.log('p',p);
        this.fetchData(p)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        this.fetchData(1);

      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      },
      tableHeight_top() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
      tableHeight_bottom() {
        const filterHeight = 100;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
    }
  }
</script>
